<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입</title>
<link rel="styleSheet" href="../css/ " type="text/css" />
<style type="text/css">
* {
 vertical-align: middle;
 }

.join {
	font-size:12px;
	font-family:Impact;
	font-weight:bold;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	border:1px solid #f0dae5;
	padding:7px 12px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(12%, #f9f9f9), color-stop(93%, #e9e9e9) );
	background:-moz-linear-gradient( center top, #f9f9f9 12%, #e9e9e9 93% );
	background:-ms-linear-gradient( top, #f9f9f9 12%, #e9e9e9 93% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background-color:#f9f9f9;
	color:#8f7488;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.join:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(12%, #e9e9e9), color-stop(93%, #f9f9f9) );
	background:-moz-linear-gradient( center top, #e9e9e9 12%, #f9f9f9 93% );
	background:-ms-linear-gradient( top, #e9e9e9 12%, #f9f9f9 93% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background-color:#e9e9e9;
}.join:active {
	position:relative;
	top:1px;
}

</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
 	console.log("function 실행");
	 	$("#idcheck").click(function(){ //중복체크 아이디 클릭이벤트
		 	var check = 0;
  			var id = $('#userid').val();
 			console.log("입력받은id : "+id);
 				 $.getJSON('../check/id_check.jsp?userid='+id,function(data){
  					 $(data).each(function(index,item){
	  						 if(Check_Empty(id)){
		  						 $('#idmessage').html("<font color=red>입력해주세요.<font>");
	  						 }else if (item.result == "success") {
			                     $('#idmessage').html("<font color=red>사용할수 있는 아이디입니다.<font>");
							 }else {
	   							 $('#idmessage').html("<font color=red>이미 사용중인 아이디 입니다.<font>");
							     $('#userid').val("");
							     $('#userid').focus();
	  						 }

  				        });
				   });
			 });
	});
	
window.onload = function(){
	//비밀번호체크이벤트
    document.getElementById('input_pw2').addEventListener('blur',pwChecker); 
    document.getElementById('input_pw').addEventListener('blur',pwChecker);
    //이메일체크이벤트
    document.getElementById('input_email').addEventListener('blur',emailChecker); 
    //전화번호체크이벤트
    document.getElementById('input_phone').addEventListener('blur',phoneChecker); 
}
function pwChecker(){  //비밀번호 체크함수
    var pw = document.getElementById('input_pw').value;
    var pwTwo = document.getElementById('input_pw2').value;
    var resultStr = '';
    if(pw != '' && pwTwo != ''){ //비밀번호 확인란까지 입력해야 실행
           if(pw == pwTwo){       //일치할때
                   resultStr = '<span id="result_true">비밀번호가 일치합니다.</span>';
                   document.getElementById('pw_checker').innerHTML = resultStr;
                   pwFlag = true; //플래그값 true
                   joinChecker(); //버튼체크
            }else{  //일치하지 않을때
                   resultStr = '<span id="result_false">비밀번호가 다릅니다.</span>';
                   document.getElementById('pw_checker').innerHTML = resultStr;
                   pwFlag = false;        //플래그값 false
                   joinChecker(); //버튼체크
           }
    }
    //두개의 입력란중 하나라도 입력이 안되있을때 실행
    if(pw == '' || pw == 'undifined' || pwTwo == '' || pwTwo == 'undifined'){
           resultStr = '비밀번호를 입력해주세요.';
           document.getElementById('pw_checker').innerHTML = resultStr;
           pwFlag = false;        //플래그값 false
           joinChecker(); //버튼체크
    }
}

function Check_Empty(str) { <!--공백체크-->
for (var i = 0; i < str.length; i++)
   if ( str.charAt(i) != " ")
      return (false);
    return (true);
}
function zipfind(user) { //zip폼 
	window.open("../main/zipForm.do","우편번호","scrollbars=yes, width=450, height=300, resizable=yes, menubar=no, top=150, left=260"); 
	return true; 
} 

function phoneChecker() { //전화번호 체크함수
		var obje = document.getElementById('input_phone').value;
		var regExp = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;
		var resultStr = '';
		if(obje){
			if (!regExp.test(obje)) {
				resultStr = '<span id="result_false">잘못된 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요. 예) 010-XXXX-XXXX"</span>';
				document.getElementById('phone_checker').innerHTML = resultStr;
				obje.value = obje.value.substring(0, obje.length - 1);
				pwFlag = false; //플래그값 true
				joinChecker(); //버튼체크
			} else {
				resultStr = '<span id="result_true">';
				document.getElementById('phone_checker').innerHTML = resultStr;
				joinChecker(); //버튼체크
			}
		}
}

function emailChecker() { //이메일 체크함수
	var obj = document.getElementById('input_email').value;
	var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
	var resultStr = '';
	if(obj){
			if (!regExp.test(obj)) {
					resultStr = '<span id="result_false">이메일형식에 맞춰 입력해주세요.</span>';
					document.getElementById('email_checker').innerHTML = resultStr;
					pwFlag = false; //플래그값 true
					joinChecker(); //버튼체크
				} else {
					resultStr = '<span id="result_true">';
					document.getElementById('email_checker').innerHTML = resultStr;
					joinChecker(); //버튼체크
				}
			}
	} 
</script>

</head>

<body>

	<form:form commandName="command" action="memberjoin.do" method="post" name="command" >
		<form:errors />
			<img src="../images/ti08.png"> 
		<table width="600" border="0"  cellspacing="5" cellpadding="5" >
			<tr>
				<td colspan="6"><hr color="#e10380" size="3" ></td>
			</tr>
			<tr>
				<td align="right" colspan="2" >
				<font color="#ff0000">*</font>는 필수 입력사항입니다</td>
			</tr>
			
			<!-- <tr>
			   
				<td bgcolor="#F00188" colspan="2" height="1"></td> 
			</tr> -->
			
			<tr>
				<td width="23%" bgcolor="#fadded" height="10">
				  <font color="#ff0000">*</font> <spring:message code="member.form.uname" /></td>
				<td>
				   <form:input path="uname" /> 
				   <form:errors path="uname" />
				</td>
			</tr>
			
			<tr>
				<td bgcolor="#fadded"><font color="#ff0000">*</font> 
				  <spring:message code="member.form.userid"  /></td>
				
				<td> <form:input path="userid" id="userid"/> 
				  
				  <form:errors path="userid" />
				   <img alt="중복확인" src="../images/btn_overlap_h19.gif" id="idcheck"  />
				  <input:label id="idmessage"/>
				</td>
			</tr>
			
			<tr>
				<td bgcolor="#fadded"><font color="#ff0000">*</font> 
				  <spring:message code="member.form.upwd" />
				</td>
				
				<td>
				  <form:password path="upwd" name="pw" id="input_pw" class="insert_input" maxlength="8" showPassword="false"/> 
				  <span class="insert_checker" id="pw_checker">비밀번호를 6-8자리로 입력해주세요</span> 
				</td>
			</tr>
			
			<tr>
				<td bgcolor="#fadded"><font color="#ff0000">*</font> 비밀번호확인</td>
				<td>
					<input type="password" name="pw2" class="insert_input" id="input_pw2"/>
				</td>
			</tr>
			
			<tr >
				<td bgcolor="#fadded" rowspan="3" ><font color="#ff0000">*</font> 
				주소</td>
				<td>
				  <form:input path="uzipcode" size="13" name="uzipcode" disabled="disabled" /> 
				  <img alt="우편번호검색" src="../images/btn_postcode_h19.gif" onclick = "zipfind(this.form)" />
				  <form:errors path="uzipcode" />
				</td>
			</tr>
			
			<tr>
				<td font color="#ff0000"></font> 

				  <form:input path="uaddr" size="40" name="uaddr" disabled="disabled"/> 기본주소
				  <form:errors path="uaddr" />
				</td>
			</tr>
			
			<tr>
				
				<td> 
				 <form:input path="uresaddr" size="40" /> 나머지주소
				 <form:errors path="uresaddr" />
				</td>
			</tr>
		
			
			<tr>
				<td bgcolor="#fadded"><font color="#ff0000">*</font> 
					<spring:message code="member.form.uphone" /></td>
				<td>
					<form:input size="13" path="uphone" name="obje" id="input_phone" class="insert_phone" maxlength="13" />
				 	<span class="insertphone_checker" id="phone_checker" class="inputb">ex)010-1234-1234</span> 
					<form:errors path="uphone" />
				</td>
			</tr>
			
			<tr>
				<td bgcolor="#fadded"><font color="#ff0000">*</font> 
					<spring:message code="member.form.uemail" />
				</td>
				<td>
					<form:input path="uemail" size="20" name="obj" id="input_email" class="insert_email"/>
					<span class="insertemail_checker" id="email_checker" class="inputb">ex)giri@giri.com</span> 
					<form:errors path="uemail" />
				</td>
			</tr>

			<tr>
				<td bgcolor="#fadded"><font color="#ff0000" ></font> 
					<spring:message code="member.form.point" />
				</td>
				<td name="upoint" size="10" value="${0 }">0 point</td>
			</tr>

			<tr>
				<td bgcolor="#fadded"><font color="#ff0000"></font> 
					<spring:message code="member.form.manager" />
				</td>
				<td>
				<form:select id="memberType" name="memberType" path="uvalid">
					<form:options items="${memberTypes}" />
				</form:select>
			</tr>
			
			<tr>
				<td height="10" colspan="2"></td>
			</tr>
			
			<tr>
				<td align="right" colspan="2"><input type="submit" value="회원가입완료" class="join">
					<input type="button" value="<spring:message code="list.content.title"/>" class="join" onclick="location.href='index.do'">
				</td>
			</tr>

		</table>
	</form:form>
</body>
</html>